<template>
	<view class="container">
		<!-- 状态筛选 -->
		<view class="status-filter">
			<view class="filter-item" :class="{ active: currentStatus === 'all' }" @click="changeStatus('all')">
				全部
			</view>
			<view class="filter-item" :class="{ active: currentStatus === 'draft' }" @click="changeStatus('draft')">
				草稿
			</view>
			<view class="filter-item" :class="{ active: currentStatus === 'published' }"
				@click="changeStatus('published')">
				进行中
			</view>
			<view class="filter-item" :class="{ active: currentStatus === 'expired' }" @click="changeStatus('expired')">
				已截止
			</view>
		</view>

		<!-- 询价单列表 -->
		<view class="inquiry-list">
			<view class="inquiry-item" v-for="item in inquiries" :key="item.id" v-if="inquiries.length > 0">
				<view class="inquiry-header">
					<text class="inquiry-number">{{ item.inquiry_number }}</text>
					<text class="inquiry-status" :class="item.status">{{ item.status_text }}</text>
				</view>

				<view class="inquiry-info">
					<view class="info-item">
						<text class="info-label">商品数量:</text>
						<text class="info-value">{{ item.total_inquiry_num }}个</text>
					</view>
					<view class="info-item">
						<text class="info-label">截止:</text>
						<text class="info-value">{{ item.deadline_formatted }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">报价数量:</text>
						<text class="info-value">{{ item.total_quote_count }}</text>
					</view>
				</view>

				<view class="inquiry-actions">
					<template v-if="item.status === 'draft'">
						<view class="action-btn edit" @click="editInquiry(item.id)">编辑</view>
						<view class="action-btn delete" @click="deleteInquiry(item.id)">删除</view>
					</template>
					<template v-else>
						<view class="action-btn detail" @click="viewDetail(item.id)">查看详情</view>
					</template>
				</view>
			</view>
			<uv-empty v-if="inquiries.length == 0" mode="data"></uv-empty>
		</view>

		<uni-load-more :status="status" :content-text="contentText" />
		<!-- 加载中 -->
		<uv-loading-page :loading="loading" loading-text="加载中..." font-size="24rpx"
			bgColor="rgba(0, 0, 0, 0.3)"></uv-loading-page>

		<!-- 右下角浮动创建按钮 -->
		<view class="floating-create-btn" @click="toFutureCreate">
			<text class="btn-icon">+</text>
			<text class="btn-text">创建询价单</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				currentStatus: 'all',
				reload: true,
				inquiries: [],
				currentPage: 1, //当前页码
				lastPage: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
			};
		},
		onShow() {
			this.resetPage();
		},
		onPullDownRefresh() {
			this.resetPage();
		},
		onReachBottom() {
			if (this.currentPage >= this.lastPage) {
				this.status = 'noMore';
			} else {
				this.reload = false;
				this.currentPage = this.currentPage + 1; //页码+1
				this.status = 'loading';
				this.loadData();
			}
		},
		methods: {
			loadData() {
				this.loading = true;
				uni.$uv.http.get('/inquiry/getInquiryList', {
					params: {
						page: this.currentPage,
						status: this.currentStatus
					}
				}).then(res => {
					const data = res.res.data;
					this.currentPage = data.current_page;
					this.lastPage = data.last_page;
					if (res.res.code === 1) {
						this.inquiries = this.reload ? data.list : this.inquiries.concat(data.list);
						this.currentPage = res.data.current_page;
						this.lastPage = res.data.last_page;
						this.status = 'more';
					} else {
						this.$wanlshop.msg(res.res.msg, 3000, true, 'none');
					}
					this.loading = false;
				}).catch(error => {
					console.log('error', error)
					this.$wanlshop.msg('获取失败，请稍后重试', 2000, true)
					this.loading = false;
				});
			},
			// 跳转到创建询价单页面
			toFutureCreate() {
				const authStatus = this.$store.state.user.verify_status;
				if (authStatus !== 'success') {
					this.$wanlshop.msgJump('请先进行认证！', '/pages/company/auth')
				} else {
					this.$wanlshop.to('/pages/future/create');
				}
			},

			changeStatus(status) {
				this.currentStatus = status;
				this.resetPage();
			},
			resetPage() {
				this.reload = true;
				this.status = 'loading';
				this.currentPage = 1;
				this.loadData();
			},
			editInquiry(id) {
				this.$wanlshop.to('/pages/future/create?id=' + id);
			},
			deleteInquiry(id) {
				uni.showModal({
					title: '提示',
					content: '确定要删除这个询价单吗？',
					success: (res) => {
						if (res.confirm) {
							uni.$uv.http.post('/inquiry/deleteInquiry', {
								inquiry_id: id
							}).then(res => {
								if (res.res.code === 1) {
									this.resetPage();
								}
								this.$wanlshop.msg(res.res.msg, 2000, true, 'none');
								this.loading = false;
							}).catch(error => {
								console.log('error', error)
								this.$wanlshop.msg('获取失败，请稍后重试', 2000, true)
								this.loading = false;
							});
						}
					}
				});
			},
			viewDetail(id) {
				this.$wanlshop.to('/pages/future/detail?id=' + id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.status-filter {
		display: flex;
		background-color: #fff;
		border-radius: 12rpx;
		padding: 10rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.filter-item {
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			font-size: 28rpx;
			color: #666;
			border-radius: 8rpx;
			transition: all 0.3s;

			&.active {
				background-color: #fe6600;
				color: #fff;
				font-weight: bold;
			}
		}
	}

	.inquiry-list {
		.inquiry-item {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin-bottom: 24rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

			.inquiry-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 24rpx;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #f0f0f0;

				.inquiry-number {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
				}

				.inquiry-status {
					font-size: 24rpx;
					padding: 6rpx 16rpx;
					border-radius: 20rpx;

					&.draft {
						background-color: #fff2e8;
						color: #fe6600;
					}

					&.published {
						background-color: #e6f7ff;
						color: #1890ff;
					}

					&.expired {
						background-color: #f6f6f6;
						color: #999;
					}
				}
			}

			.inquiry-info {
				margin-bottom: 30rpx;

				.info-item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 12rpx;

					.info-label {
						font-size: 26rpx;
						color: #666;
					}

					.info-value {
						font-size: 26rpx;
						color: #333;
						font-weight: 500;
					}
				}
			}

			.inquiry-actions {
				display: flex;
				justify-content: flex-end;

				.action-btn {
					padding: 14rpx 28rpx;
					border-radius: 8rpx;
					font-size: 26rpx;
					margin-left: 20rpx;

					&.edit {
						background-color: #fe6600;
						color: #fff;
					}

					&.delete {
						background-color: #fff;
						color: #fe6600;
						border: 1rpx solid #fe6600;
					}

					&.detail {
						background-color: #fe6600;
						color: #fff;
					}
				}
			}
		}
	}

	/* 右下角浮动按钮 */
	.floating-create-btn {
		position: fixed;
		bottom: 60rpx;
		background-color: #fe6600;
		color: #fff;
		border-radius: 50rpx;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 6rpx 20rpx rgba(254, 102, 0, 0.4);
		z-index: 999;

		.btn-icon {
			font-size: 36rpx;
			margin-right: 10rpx;
			font-weight: bold;
		}

		.btn-text {
			font-size: 28rpx;
			font-weight: 500;
		}
	}

	.floating-create-btn {
		right: 40rpx;
	}
</style>